<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <!--
    深度监视：
        1：Vue中的watch默认不监测对象内部值的改变（一层）
        2：监视属性中配置deep为true即可监测对象内部值的改变（多层）

    备注：
        1：Vue默认可以监视到多级属性的变化(例如页面修改数据)
        2：只是提供的watch属性需根据使用场景，手动开启深度监视
    -->

    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气，函数方式</button>
      <hr />
      <h3>a的值是:{{numbers.a}}</h3>
      <!--在事件中处理简单逻辑-->
      <button @click="numbers.a++">点我让a加1</button>
      <hr />
      <h3>b的值是:{{numbers.b}}</h3>
      <button @click="numbers.b++">点我让b加1</button>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
        numbers: {
          a: 1,
          b: 2,
        },
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
      watch: {
        isHot: {
          handler(newValue, oldValue) {
            console.log(
              "默认属性isHot被修改了，新值" + newValue + "，旧值" + oldValue
            );
          },
        },
        //属性的key不可以带符号，需使用原始方式获取层级下监听。     以前不带引号是简写省略了
        "numbers.a": {
          handler() {
            console.log("a被改变了");
          },
        },
        //如果直接监视numbers，VM相当于监视对象地址（Java引用类型），而不是关注内部的数据修改
        numbers: {
          //深度监视多层级结构中所有属性的变化
          deep: true,
          handler() {
            console.log("numbers被改变了");
          },
        },
      },
    });
  </script>
</html>
